<template>
  <div class="profile">
    <nav-bar class="profile-nav">
      <template v-slot:center>
          SuperMall商城
      </template>
    </nav-bar>
    <!-- 用户个人信息 -->
    <user-info></user-info>
    <!-- account信息 -->
    <user-account></user-account>
    <!-- orderList -->
    <list-view :list-data="orderList" class="orderlist"></list-view>
    <!-- service -->
    <list-view :list-data="serviceList" class="servicelist"></list-view>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import UserInfo from './childComps/UserInfo.vue'
import UserAccount from './childComps/UserAccount.vue'
import ListView from './childComps/ListView.vue'

export default {
   name:'Profile',
   components:{
     NavBar,
     UserInfo,
     UserAccount,
     ListView
   },
   data(){
     return {
       orderList:[
         {icon:'#order',iconColor:'#ff8198',info:'我的消息'},
         {icon:'#point',iconColor:'#fc7b53',info:'积分商城'},
         {icon:'#vip',iconColor:'#ffc636',info:'会员卡'}
       ],
       serviceList:[
         {icon:'#service',iconColor:'#ff8198',info:'我的购物车'},
         {icon:'#download',iconColor:'#ff8198',info:'下载购物APP'}
       ]
     }
   }
}
</script>

<style>
  .profile {
    background-color: #f2f2f2;
  }
  .profile-nav {
    background-color:#ff8198;
    color: #fff;
    font-weight: 550;
  }

  .orderlist , .servicelist{
    margin-top: 12px;
  }
</style>